<script setup lang="ts">
import { ref } from 'vue';
// import TheWelcome from '../components/TheWelcome.vue'
import { AutoComplete, Todos, Greet, Counter } from '@mitosis-demo/library-vue';
import { Button, Modal } from '@mitosis-demo/library-vue';

const handleClick = () => {
  alert('Button clicked!');
};
const showModal = ref(false);

const toggleModal = () => {
  showModal.value= !showModal.value;
};
</script>

<template>
  <main>
    <!-- <TheWelcome /> -->
    <div> ---AutoComplete------------ </div>
    <AutoComplete />
    <div> ---Todos------------ </div>
    <Todos />
    <div> ---Greet------------ </div>

    <Greet />
    <div> ---Counter------------ </div>

    <Counter />
    <div> ---Button------------</div>
    <Button label="Primary Button" color="primary" @click="handleClick" />
    <Button label="Secondary Button" color="secondary" />
    <Button label="Danger Button" color="danger" />
    <Button label="Success Button" color="success" />
    <Button label="Warning Button" color="warning" />
    <Button label="Disabled Button" color="primary" disabled />
    <div> ---Modal------------</div>
    <button color="primary" @click="toggleModal">Show Modal</button>
    <Modal :showModal="showModal" backdropClass="modal-overlay" modalClass="modal-content" title="Modal Title" :onClose="toggleModal">
      some message!
    </Modal>
  </main>
</template>
<style>
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 80%;
      max-width: 500px;
      text-align: center;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header button {
      background: none;
      border: none;
      font-size: 1.5em;
      cursor: pointer;
    }
  </style>
